<template>
  <view
    :style="{ top: capButton.top + 'px' }"
    class="back icon-left"
    @click="onBack"
  />
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["capButton"]),
  },
  methods: {
    onBack() {
      const pages = getCurrentPages();

      if (pages.length > 1) {
        uni.navigateBack();
      } else {
        uni.switchTab({ url: "/pages/index/index" });
      }
    },
  },
};
</script>

<style>
.back {
  position: absolute;
  left: 50rpx;
  z-index: 9;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  font-size: 23px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
